import React, { Component } from 'react';
import Progress from '../components/Progress';

class Test extends Component {
    state = {
        data2: []
    };

    componentDidMount() {
        // setInterval(() => {
        //     const data2 = 's'
        //         .repeat(10)
        //         .split('')
        //         .map((item, i) => {
        //             return {
        //                 width: 120,
        //                 value: Math.floor(Math.random() * 100),
        //                 color: [
        //                     '#' +
        //                         Math.floor(Math.random() * 16777215).toString(
        //                             16
        //                         ),
        //                     '#' +
        //                         Math.floor(Math.random() * 16777215).toString(
        //                             16
        //                         )
        //                 ],
        //                 r: 165 + i * 50,
        //                 type:'circle'
        //             };
        //         });
        //     this.setState({ data2 });
        // }, 1000);
    }
    render() {
        const circleData1 = [
            {
                width: 25,
                r: 200,
                color: '#c1bbbb',
                value: 100,
                type: 'circle'
            },
            {
                width: 25,
                r: 200,
                color: ['#3AB078', '#000'],
                value: 50,
                type: 'circle'
            }
        ];
        const circleData2 = [
            {
                width: 20,
                r: 200,
                color: '#c1bbbb',
                value: 100,
                type: 'circle'
            },
            {
                width: 10,
                r: 165,
                color: ['#3AB078', '#000'],
                value: 100,
                type: 'circle'
            },
            {
                width: 70,
                r: 150,
                color: ['#3AB078', '#000'],
                value: 75,
                type: 'circle'
            }
        ];
        const circleData3 = 's'
            .repeat(10)
            .split('')
            .map((item, i) => {
                return {
                    type: 'circle',
                    width: 60,
                    // value: Math.floor(Math.random() * 100),
                    value: 100,
                    color: [
                        '#' + Math.floor(Math.random() * 16777215).toString(16),
                        '#' + Math.floor(Math.random() * 16777215).toString(16)
                    ],
                    r: 50 + i * 30
                };
            });
        const changeType = (data, type) => {
            const newData = [];
            data.map((item, i) => {
                newData.push({ ...item });
                newData[i].type = type;
            });
            return newData;
        };

        const circleDashData1 = [
            {
                r: 150,
                color: '#c1bbbb',
                value: 100,
                type: 'dashedCircle',
                divide: 48,
                width: 20,
                height: 40,
                rx: 4,
                ry: 4
            },
            {
                r: 150,
                color: ['#3AB078', '#000'],
                value: 75,
                type: 'dashedCircle',
                divide: 48,
                width: 20,
                height: 40,
                rx: 4,
                ry: 4
            }
        ];
        const circleDashData2 = [
            {
                r: 250,
                color: ['#3AB078', '#000'],
                value: 75,
                type: 'circle',
                divide: 48,
                width: 10
            },
            {
                r: 250,
                color: '#c1bbbb',
                value: 100,
                type: 'dashedCircle',
                divide: 48,
                width: 20,
                height: 40,
                rx: 4,
                ry: 4
            },
            {
                r: 250,
                color: ['#3AB078', '#000'],
                value: 75,
                type: 'dashedCircle',
                divide: 48,
                width: 20,
                height: 40,
                rx: 4,
                ry: 4
            },
            {
                r: 200,
                color: '#c1bbbb',
                value: 100,
                type: 'dashedCircle',
                divide: 36,
                width: 20,
                height: 20,
                rx: 40,
                ry: 40
            },
            {
                r: 200,
                color: ['#3AB078', '#000'],
                value: 75,
                type: 'dashedCircle',
                divide: 36,
                width: 20,
                height: 20,
                rx: 40,
                ry: 40
            }
        ];
        const circleDashData3 = 's'
            .repeat(10)
            .split('')
            .map((item, i) => {
                return {
                    rx: 4,
                    ry: 4,
                    divide: 24,
                    type: 'dashedCircle',
                    width: 20,
                    height: 40,
                    // value: Math.floor(Math.random() * 100),
                    value: 100,
                    color: [
                        '#' + Math.floor(Math.random() * 16777215).toString(16),
                        '#' + Math.floor(Math.random() * 16777215).toString(16)
                    ],
                    r: 50 + i * 30
                };
            });
        return (
            <div>
                <Progress>50%</Progress>
                <Progress data={circleData2}>
                    <span>75%</span>
                </Progress>
                <br />
                <Progress data={circleData3} />
                <br />
                <Progress data={changeType(circleData1, 'rect')}>
                    <span>75%</span>
                </Progress>
                <br />
                <Progress data={changeType(circleData2, 'rect')}>
                    <span>75%</span>
                </Progress>
                <br />
                <Progress data={changeType(circleData3, 'rect')} />
                <br />
                <Progress data={circleDashData1}>
                    <span>75%</span>
                </Progress>
                <br />
                <Progress data={circleDashData2}>
                    <span>75%</span>
                </Progress>
                <br />
                <Progress data={circleDashData3} />
                <br />
            </div>
        );
    }
}

export default Test;
